import React, { FC, useState } from 'react';
import { TreeSelect } from 'antd';

const TreeSelectDemo: FC = () => {
  const [treeData] = useState([
    {
      id: '1',
      value: '1',
      title: '测试01',
    },
    {
      id: '2',
      pId: '1',
      value: '2',
      title: '测试01-01',
      isLeaf: true,
    },
  ]);
  const [value] = useState('');

  const onLoadData = (node: any) => {
    return new Promise((reslove, reject) => {
      console.log(node);

      reslove(undefined);
    });
  };

  return (
    <>
      <TreeSelect
        treeDataSimpleMode
        style={{
          width: '100%',
        }}
        value={value}
        dropdownStyle={{
          maxHeight: 400,
          overflow: 'auto',
        }}
        placeholder="Please select"
        loadData={onLoadData}
        treeData={treeData}
      ></TreeSelect>
    </>
  );
};

export default TreeSelectDemo;
